<template>
  <div>
    <h1>课程列表</h1>
    <el-table :data="data.data" border stripe>
      <el-table-column
        v-for="(field, name) in fields"
        :prop="name"
        :key="name"
        :label="field.label"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot="scope">
          <el-button type="primary" @click="edit(scope.id)">编辑</el-button>
          <el-button type="danger" @click="delete scope.id">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class CourseList extends Vue {
  data = {}

  fields = {
    _id: { label: 'ID' },
    name: { label: '课程名称' },
    cover: { label: '课程封面' }
  }

  async fetch() {
    const res = await this.$http.get('courses')
    this.data = res.data
  }

  async edit() {}

  created() {
    this.fetch()
  }
}
</script>
<style scoped></style>
